<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品名称</title>
    <link rel="stylesheet" href="../css/generalMerchandise.css">
    <link rel="stylesheet" href="../css/product.css">
    <link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../res/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../res/jquery/jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            $(".product-seckill-wrap").hide();
            // $(".product-seckill-wrap").click(function(){
            //     $(this).hide();
            // });
        });
    </script>

    <style>

        body {
            font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #666;
            background: #fff;
        }

        .layui-nav .layui-nav-item {
            line-height: 40px;
        }

        .layui-bg-cyan {
            background-color: #010101 !important;
        }

        .layui-nav .layui-nav-item a {
            color: #FDF7F7;
        }

        .layui-carousel[lay-arrow=always] .layui-carousel-arrow {
            opacity: 1;
            left: 0px;
            margin-top: -18px;
        }

        .layui-carousel:hover .layui-carousel-arrow[lay-type=add], .layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] {
            right: 0px;
        }

        .option-color {
            line-height: 40px;
        }
        .layui-carousel-arrow{
            border-radius: 0;
            background-color: white;
            color: black;
        }

        .layui-carousel>[carousel-item]>*{
            background-color: white;
        }


    </style>
</head>
<body>
<!--最上面的导航-->
<div class="shortcut-2014">
    <div class="w">
        <ul class="fr">
            <li class="fore1" id="ttbar-login">
                <a href="" class="link-login">你好，请登录</a>
                &nbsp;&nbsp;
                <a href="" class="link-regist style-red">免费注册</a>
            </li>
            <!--<li class="spacer"></li>-->
            <li class="fore2">
                <div class="dt">
                    <a href="" target="_blank">我的订单</a>
                </div>
            </li>
        </ul>
    </div>
</div>

<!--主体部分 -- 头部导航下面盒子：logo + 搜索 + 购物车 -->
<div class="mod_conatiner">

    <!--搜索部分-->
    <div class="cms_header" id="cms_header" style="min-height: 100px">
        <div class="w">
            <!--左边部分-->
            <div id="logo-2014">
                <a href="" class="logo">树懒</a>
                <div class="extra">
                    <div id="channel">手机</div>
                    <!--<div id="categorys_mini">
                        <div class="cw_icon">
                            <h2>
                                <a href="">
                                    全部分类
                                    <i class="ci_right">
                                        <s>◇</s>
                                    </i>
                                </a>
                            </h2>
                        </div>
                        <div class="hover" id="categorys-mini-main">
                            <div class="dd-inner">
                                <div class="item for1">
                                    <h3>
                                        <a href="">华为</a>
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>-->
                    <div id="xialakuang">
                        <ul class="nav">
                            <li class="first-menu">
                                <a href="">全部分类</a>
                                <ul class="second-nav">
                                    <li><a href="">华为</a></li>
                                    <li><a href="">小米</a></li>
                                    <li><a href="">OPPO</a></li>
                                </ul>
                                <ul class="second-nav">
                                    <li><a href="">荣耀</a></li>
                                    <li><a href="">红米</a></li>
                                    <li><a href="">vivo</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--搜索部分-->
            <div id="search-2014">
                <ul class="hide" id="shelper"></ul>
                <div class="form">
                    <input type="text" class="text" id="key">
                    <button class="button cw_icon">
                        <i></i>
                        搜索
                    </button>
                </div>
            </div>

            <!--右边购物车-->
            <div id="settleup-2014" class="dorpdown">
                <div class="cw_icon">
                    <i class="ci-left"></i>
                    <i class="ci_right">></i>
                    <!--<i class="ci-count" id="shopping-amount">28</i>-->
                    <a href="" target="_blank">我的购物车</a>
                </div>
                <!--                        <div class="dorpdown-layer">-->
                <!--                            <div class="spacer"></div>-->
                <!--                            <div class="prompt">-->
                <!--                                <div class="nogoods">-->
                <!--                                    <b></b>-->
                <!--                                    购物车中还没有商品，赶快选购吧！-->
                <!--                                </div>-->
                <!--                            </div>-->
                <!--                        </div>-->
            </div>
            <div id="hotwords"></div>
            <span class="clr"></span>
        </div>
    </div>
</div>

<div class="shop-head">
    <img src="../images/productDetailsImg/top.jpg"/>
    <div>
        <ul class="layui-nav layui-bg-cyan">
            <li class="layui-nav-item"><a href="">首页</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">全部分类</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>

            <li class="layui-nav-item"><a href="">OPOO</a></li>
            <li class="layui-nav-item"><a href="">IQOO</a></li>
            <li class="layui-nav-item"><a href="">荣耀</a></li>
            <li class="layui-nav-item"><a href="">小米</a></li>
            <li class="layui-nav-item"><a href="">realme</a></li>
            <li class="layui-nav-item"><a href="">一加</a></li>
            <li class="layui-nav-item"><a href="">关于我们</a></li>
        </ul>
    </div>

</div>

<div class="product-address">
    <ul class="address-iitem">

        <li class="item-first">手机</li>
        <li class="item-first sep">></li>
        <!--        <div>&gt;</div>-->
        <li class="gitem-second">一加</li>
        <li class="item-first sep">></li>

        <!--        <div>&gt;</div>-->

        <li class="item-tirdt">一加9r</li>

    </ul>
</div>
<div class="product-main">
    <!-- 左边图片 -->
    <div class="product-picture-all">
        <div class="product-img">
            <img src="../images/productDetailsImg/pic1.jpg">
        </div>
        <div class="product-img-list">
            <div class="layui-carousel" id="test3">
                <div carousel-item="">
                    <ul class="pictures">
                        <li>
                            <a> <img src="../images/productDetailsImg/pic1.jpg" onmouseover="changeImg(1)"></a>
                        </li>
                        <li>
                            <a> <img src="../images/productDetailsImg/pic2.jpg" onmouseover="changeImg(2)"></a>
                        </li>
                        <li>
                            <a> <img src="../images/productDetailsImg/pic3.jpg" onmouseover="changeImg(3)"></a>
                        </li>
                        <li>
                            <a> <img src="../images/productDetailsImg/pic4.jpg" onmouseover="changeImg(4)"></a>
                        </li>
                        <li>
                            <a> <img src="../images/productDetailsImg/pic5.jpg" onmouseover="changeImg(5)"></a>
                        </li>

                    </ul>
                    <ul class="pictures">
                        <li>
                            <a> <img src="../images/productDetailsImg/pic6.png" onmouseover="changeImg(6)"></a>
                        </li>
                        <li>
                            <img src="../images/productDetailsImg/pic7.png" onmouseover="changeImg(7)">
                        </li>
                        <li>
                            <img src="../images/productDetailsImg/pic8.png" onmouseover="changeImg(8)">
                        </li>
                        <li>
                            <img src="../images/productDetailsImg/pic9.png" onmouseover="changeImg(9)">
                        </li>
                        <li>
                            <img src="../images/productDetailsImg/pic10.png" onmouseover="changeImg(10)">
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!--        <div class="product-button"></div>-->
    </div>

    <!--  右边  -->
    <div class="product-text">
        <div class="product-name">vivo S10 5G手机 8GB+256GB 青柠 超轻薄机身 前置4400万超清双摄 自然柔光人像 6nm旗舰芯片 拍照手机</div>
        <!--        <div class="product-seckill-wrap">-->
        <!--            <div class="product-seckill-time">1:23:45</div>-->
        <!--            <div class="product-seckill-secprice"></div>-->

        <!--        </div>-->
        <div class="product-wrap">
            <ul>
                <li class="">
                    <label class="price-name">特 惠 价</label>
                    <span class="p-price">
                        <span class="price-sign">￥</span>
                        <span class="price-num">3598.00</span>
                    </span>
                </li>
                <li class="review">
                    <div class="xxx" style="width: 50px;height: 30px;">
                        <p>累计评价</p>
                        <a style="font: 14px verdana;color: #005ea7;">1万+</a>
                    </div>
                </li>

                <li>
                    <label>促&nbsp;&nbsp;销</label>
                    <span>
                        <span class="p-h1-flag">赠品</span>
                        <span class="p-h1">耳机 × 1</span>
                        <span class="p-h1-ps">（赠完即止）</span>
                        <!--                        <div class="J-gift-limit gift-limit"></div>-->
                    </span>
                </li>

                <li>
                    <label>&nbsp;</label>

                    <span class="p-text">
                        <span class="p-h1-flag">限购</span>
                        <span class="p-h1">限购5件</span>
                    </span>
                </li>

            </ul>

        </div>

    </div>
    <div class="product-choose">

        <ul class="choose-top">

            <li>
                <label>服务说明</label>
                <span>预计付款后7天内发货</span>
                <!--                    <span>0.55kg</span>-->
            </li>
            <li>
                <label>&nbsp; </label>
                <span>已满99元包邮</span>
            </li>
            <li>
                <label>&nbsp; </label>
                <span>由树懒商城提供商品、发货开票及售后服务</span>
            </li>
            <li>
                <label>重&nbsp;&nbsp;量</label>
                <span>0.55kg</span>
            </li>
        </ul>
        <ul class="choose-bottom">
            <!--            style="line-height: 40px;"-->
            <li class="option-color" style="line-height: 40px">
                <label>选择颜色</label>
                <div class="option">
                    <img src="/images/productDetailsImg/option1.jpg">
                    <i>亮黑色</i>
                </div>
                <div class="option">
                    <img src="/images/productDetailsImg/option1.jpg">
                    <i>亮黑色</i>
                </div>
                <div class="option">
                    <img src="/images/productDetailsImg/option1.jpg">
                    <i>亮黑色</i>
                </div>
                <div class="option">
                    <img src="/images/productDetailsImg/option1.jpg">
                    <i>亮黑色</i>
                </div>
            </li>
            <li>
                <label>选择版本 </label>
                <div class="option">
                    <a>8GB+128GB</a>
                </div>
                <div class="option">
                    <a>8GB+256GB</a>
                </div>
            </li>
            <li>
                <label>选择套餐</label>
                <div class="option">
                    <a>官方标配</a>
                </div>
            </li>
            <li>
                <label>增值保障</label>
                <div class="option">
                    <a>2年碎屏换屏¥179.00</a>
                </div>
                <div class="option">
                    <a>2年全保修¥275.00</a>
                </div>
            </li>

        </ul>

    </div>
    <div class="finish-btn">
        <div class="choose-count">
            <input class="buy-num" value="1" data-max="5">
            <a class="num-reduce">-</a>
            <a class="num-add">+</a>
        </div>
        <div class="into-cart">
            <a>立即购买</a>
        </div>
        <div class="buy-now">
            <a>加入购物车</a>
        </div>
    </div>


</div>

<div class="other-module">
    <div class="recommend">
        <div class="recommend-title">
            <h3>达人选购</h3>
        </div>
        <div class="recommend-product">
            <ul>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
                <li>
                    <div class="c-p-img">
                        <a>
                            <img src="../images/productDetailsImg/pic1.jpg">
                        </a>
                    </div>
                    <div class="c-p-name">
                        <a>华为mate40 5G手机【支持鸿蒙HarmonyOs】 亮黑色 mate40e全网通(8G+128G)【4G版】</a>
                    </div>
                    <div class="c-p-price">
                        <strong>￥4399.00</strong>
                    </div>
                </li>
            </ul>

        </div>

    </div>
    <div class="details">

        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">商品介绍</li>
                <li>商品评价</li>
                <!--                <li>权限分配</li>-->
                <!--                <li>商品管理</li>-->
                <!--                <li>订单管理</li>-->
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <div class="p-parameter">
                        <div class="p-brand">
                            <a>品牌: &nbsp;</a>
                            <a>华为</a>
                        </div>

                        <ul class="p-parameter-list">
                            <li title="华为Mate 40 Pro">商品名称：华为Mate 40 Pro</li>
                            <li title="100022634068">商品编号：100022634068</li>
                            <li title="0.6kg">商品毛重：0.6kg</li>
                            <li title="中国大陆">商品产地：中国大陆</li>
                            <li title="麒麟9000">CPU型号：麒麟9000</li>
                            <li title="8GB">运行内存：8GB</li>
                            <li title="128GB">机身存储：128GB</li>
                            <li title="NM存储卡">存储卡：NM存储卡</li>
                            <li title="后置三摄">摄像头数量：后置三摄</li>
                            <li title="5000万像素">后摄主摄像素：5000万像素</li>
                            <li title="1300万像素">前摄主摄像素：1300万像素</li>
                            <li title="其他">分辨率：其他</li>
                            <li title="其他">屏幕比例：其他</li>
                            <li title="其他">屏幕前摄组合：其他</li>
                            <li title="10V/4A；4.5V/5A；11V/6A；5V/2A；10V/2.25A；5V/4.5A；9V/2A">
                                充电器：10V/4A；4.5V/5A；11V/6A；5V/2A；10V/2.25A；5V/4.5A；9V/2A
                            </li>
                            <li title="无线充电，快速充电，防水防尘，NFC，屏幕指纹，高倍率变焦，曲面屏，5G，3D(ToF或结构光)，屏幕高刷新率">
                                热点：无线充电，快速充电，防水防尘，NFC，屏幕指纹，高倍率变焦，曲面屏，5G，3D(ToF或结构光)，屏幕高刷新率
                            </li>
                            <li title="支持IPv6">支持IPv6：支持IPv6</li>
                            <li title="HarmonyOS 2">系统：HarmonyOS 2</li>
                        </ul>

                    </div>
                    <div class="p-news"></div>

                </div>
                <div class="layui-tab-item p-review">
                    <div class="review-title">
                        <h3>商品评价</h3>
                    </div>

                    <div class="reviews">
                        <div class="review-item"></div>
                        <div class="review-item"></div>
                        <div class="review-item"></div>
                        <div class="review-item"></div>
                    </div>

                </div>
                <!--                                <div class="layui-tab-item">3</div>-->
                <!--                                <div class="layui-tab-item">4</div>-->
                <!--                                <div class="layui-tab-item">5</div>-->
                <!--                                <div class="layui-tab-item">6</div>-->
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="../res/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });


    layui.use('carousel', function () {
        var carousel = layui.carousel;
        carousel.render({
            elem: '#test3',
            width: '100%',
            height: '100%',
            arrow: 'always',
            anim: 'default',
            indicator: 'none',
            autoplay: false
        });
    });
</script>

<script> //切换Tab
layui.use('element', function () {
    var $ = layui.jquery
        , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

    //触发事件
    var active = {
        tabChange: function () {
            //切换到指定Tab项
            element.tabChange('demo', '22'); //切换到：用户管理
        }
    };

    $('.site-demo-active').on('click', function () {
        var othis = $(this), type = othis.data('type');
        active[type] ? active[type].call(this, othis) : '';
    });

    //Hash地址的定位
    var layid = location.hash.replace(/^#test=/, '');
    element.tabChange('test', layid);

    element.on('tab(test)', function (elem) {
        location.hash = 'test=' + $(this).attr('lay-id');
    });

});
</script>
<script src="../js/product.js"></script>
</body>
</html>